<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点名</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
       
    }

    .box {
        width: 80vw;
        margin: 0 auto;
        background: #EFEFEF;
    }

    #name {
        padding: 60px;
        font-size: 40px;
        font-weight: 900;
        text-align: center;
        background: url(./img/GitHub头像.jpg) no-repeat center;
        /* 文字显示背景图 */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    h1 {
        height: 70px;
        line-height: 70px;
        background: #ccc;
        text-align: center;
        -webkit-text-stroke: 1px #000;
        -webkit-text-fill-color: transparent;
    }

    #bt {
        height: 50px;
        line-height: 50px;
        background: deepskyblue;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }
</style>

<body id="bodybj">
    <div class="box">
        <h1>点名大战</h1>
        <div id="name">张三</div>
        <div id="bt">开始点名</div>
    </div>

</body>
</html>
<script>
    // 定义一个数组存储姓名
    var names = ["张三","里斯","王二麻子","代大傻子","刚子","狍子","商榷","虫胤","慧虫","小黑子","老杨"];
    console.log(names.length);
    // 定义一个变量存储定时器
    var timer = null;
    //获取显示姓名的元素和按钮元素
    var bt = document.getElementById("bt");
    var name1 = document.getElementById("name");
    bt.onclick = function() {
        if (!timer) {
            //若定时器不存在，则开始随机点名
            timer = setInterval(function() {
                // 生成一个随机数
                var randomIndex = Math.floor(Math.random() * names.length);
                // 显示随机姓名
                name1.innerHTML = names[randomIndex];
            }, 100)
            document.getElementById("bt").style.background = "red";
            document.getElementById("bt").innerHTML = "停止点名";
        }else{
            // 若定时器存在，则停止随机点名
            clearInterval(timer);
            timer = null;
            document.getElementById("bt").style.background = "deepskyblue";
            document.getElementById("bt").innerHTML = "开始点名";
        }

    }
</script>